<template>
   <div class="wrap">
      <header>
         <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
         <span>店铺详情</span>
         <img src="../../../static/img/fenxiang.png" alt="">
      </header>
      <div class="shopInfoWrap" v-if="shopInfo!=1">
         <div class="sp-top" >
            <img :src="$store.state.imgurlApi+shopInfo.store_info.door_photo_image" alt="">
            <div class="sp-right">
               <div class="sp-name"><p>{{shopInfo.config_info[0].value}}</p> <p @click="collection"><img :src="sc?'../../../static/img/sc001ed.png':'../../../static/img/sc001.png'" alt="" ><span>{{sc?'已收藏':'收藏商品'}}</span></p></div>
               <div class="sp-pf"><p>
                  <img src="../../../static/img/pingfenxing.png" alt=""><img src="../../../static/img/pingfenxing.png" alt=""><img src="../../../static/img/pingfenxing.png" alt=""><img src="../../../static/img/pingfenxing.png" alt=""><img
                       src="../../../static/img/pingfenxing.png" alt=""><span>5</span><span>已售{{shopInfo.config_info[18].value}}</span>
               </p>
                  <p class="jl_shop">
                     <span>{{shopInfo.config_info[7].value}}</span><span>{{space(lat,lng,shopInfo.config_info[10].value.split(',')[1],shopInfo.config_info[10].value.split(',')[0])}}</span>
                  </p>
               </div>
               <div class="sp-pl">
                  <p>评论<span style="color: #F33B3B">{{shopInfo.config_info[19].value}}条</span></p>
                  <p>|</p>
                  <p>人均<span style="color: #F33B3B">￥{{shopInfo.config_info[15].value}}元</span></p>
               </div>
               <div class="sp-time">
                  <p>外卖￥{{shopInfo.config_info[16].value}}元起送&nbsp;&nbsp;|&nbsp;&nbsp;免费配送</p>
                  <p>{{shopInfo.config_info[17].value?shopInfo.config_info[17].value:30}}分钟</p>
               </div>
            </div>
         </div>
         <div class="sp-yytime">
            <img src="../../../static/img/yyshijian.png" alt="">
            <p>配送营业时间：{{shopInfo.config_info[4].value}}~{{shopInfo.config_info[5].value}}</p>
         </div>
         <div class="sp-ljyh" @click="yhjShow = true">
            <div class="yhj"><p>领券优惠</p><p>满150减10，满200减20</p></div>
            <img src="../../../static/img/youjiantou-111.png" alt="">
         </div>
      </div>

      <div class="shop">
         <div class="shoptit">
            <router-link tag="div" v-for="(x,y) in titList" :to="{path:x.page,query:{id:$route.query.id}}" :class="present == x.page?'tis':''" :key="y" replace>
               {{x.text}}
               <transition name="el-zoom-in-center">
                  <p class="shopHt" v-show="present == x.page"></p>
               </transition>
            </router-link>
         </div>
         <router-view></router-view>
      </div>

      <!--  优惠券选择  -->
      <van-popup v-model="yhjShow" round position="bottom" :style="{ height: '45%' }">
         <div class="yhj_wrap">
            <div class="yhj_tit"><p>领取优惠券</p><img src="../../../static/img/closeTu.png" alt="" @click="yhjShow=false">
            </div>
            <div class="yhj_item_wrap">
               <div class="yhj_item" v-for="x in yhjList">
                  <div class="yhj_item_left">
                     <p><span>￥</span>{{x.money}}</p>
                     <p>满{{x.m}}元可用</p>
                  </div>
                  <div class="yhj_item_right">
                     <div class="yhj_item_rt_left">
                        <p>{{x.money}}元代金券</p>
                        <img src="../../../static/img/dianpuhongbao@2x.png" alt="">
                        <p>{{x.time}}</p>
                     </div>
                     <p :class="x.usered?'yhj_item_btn usered':'yhj_item_btn'" @click="x.usered = true">{{x.usered?'立即使用':'立即领取'}}</p>
                  </div>
               </div>
            </div>
         </div>
      </van-popup>
   </div>
</template>

<script>
    import Vue from 'vue';
    import {ActionSheet, popup} from 'vant';

    Vue.use(ActionSheet);
    Vue.use(popup);
    export default {
        name: "shopInfo",
        data() {
            return {
                titList: [{text: '商品', page: '/components/ClientComponents/shopInfo/shopInfoShop'}, {
                    text: '评价',
                    page: '/components/ClientComponents/shopInfo/BusinessEvaluation'
                }, {text: '商家', page: '/components/ClientComponents/shopInfo/shopInfoSellWell'}],
                present: 'shopInfoShop',
                yhjShow: false,
                yhjList: [{money: 20, m: 50, time: '有效期至2020年5月30号', usered: false}, {
                    money: 20,
                    m: 50,
                    time: '有效期至2020年5月30号',
                    usered: true
                }, {money: 20, m: 50, time: '有效期至2020年5月30号', usered: true}],
                shopInfo: 1, // 店铺详情
                lat: 34.27,
                lng: 108.95,
                sc:false, // 当前商品是否已收藏
            }
        },
        beforeCreate() {
            let vThis = this;
            // 获取当前位置经纬度
            new BMap.Geolocation().getCurrentPosition(
                function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        //通过Geolocation类的getStatus()可以判断是否成功定位。
                        vThis.$nextTick(() => {
                            vThis.lat = r.point.lat;
                            vThis.lng = r.point.lng;
                        })
                    }
                },
                {enableHighAccuracy: true});
        },
        created(){
            this.$myAxios('store/index/info', 'post', {
                store_id: this.$route.query.id
            }).then(res => {
                console.log(res.data)
                if (res.data.code == 1) {
                    this.shopInfo = res.data.data;
                } else {
                    this.$myNotice('请检查网络~', 1500);
                }
            });
            // 请求商品是否收藏
            this.$myAxios('index/Collect/collect_manystore','post',{
                user_id:this.$myStorage.query(),
                manystore_id:this.$route.query.id
            }).then(res=>{
                if (res.data.state == 1) {
                    this.sc = true;
                }
            })
        },
        mounted() {
            let str = this.$route.path;
            this.present = str;
        },
        methods: {
            // 计算经纬度
            space(lat1, lng1, lat2, lng2) {
                var radLat1 = lat1 * Math.PI / 180.0;
                var radLat2 = lat2 * Math.PI / 180.0;
                var a = radLat1 - radLat2;
                var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
                var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
                s = s * 6378.137;
                s = Math.round(s * 10000) / 10000;
                return (s).toFixed(1) + 'km'  // 单位千米
            },
            // 收藏
            collection(){
                var type = '';
                if (this.sc) {
                    // 取消收藏
                    type = 'delete';
                }
                this.$myAxios('index/collect/collect_manystore_add','post',{
                    user_id: this.$myStorage.query(),
                    manystore_id: this.$route.query.id,
                    type_form:type
                }).then(res=>{
                    console.log(res.data)
                    if (res.data.state == 1 && type == 'delete') {
                        this.sc = false;
                        // 更新用户资料
                        this.$store.commit('obtainUserInfo',this.$myStorage.query())
                    }else if (res.data.state == 1 && type == '') {
                        this.sc = true;
                        // 更新用户资料
                        this.$store.commit('obtainUserInfo',this.$myStorage.query())
                    }else {
                        this.$myNotice('请检查网络~',1500)
                    }
                });
            },
            back() {
                this.$router.back()
            }
        },
        watch: {
            $route(to, from) {
                this.present = to.path;
            }
        }
    }
</script>

<style scoped>
   .wrap {
      width: 100%;
      box-sizing: border-box;
      padding-top: .5rem;
      font-family: PingFang SC;
      background-color: #F5F5F5;
   }

   header {
      width: 100%;
      height: .5rem;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      background: linear-gradient(90deg, rgba(255, 142, 65, 1) 0%, rgba(255, 110, 0, 1) 100%);
      z-index: 999;
   }

   header > span {
      font-size: .16rem;
      color: #ffffff;
      font-weight: 500;
   }

   header > img {
      position: absolute;
   }

   header > img:nth-child(1) {
      left: .15rem;
      width: .1rem;
      height: .17rem;
   }

   header > img:nth-child(3) {
      right: .15rem;
      width: .03rem;
      height: .17rem;
   }

   .shopInfoWrap {
      width: 100%;
      box-sizing: border-box;
      padding: .1rem .15rem;
      background-color: #ffffff;
      margin-bottom: .1rem;
   }

   .sp-top {
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      margin-bottom: .1rem;
   }

   .sp-top > img:nth-child(1) {
      width: .68rem;
      height: .68rem;
      margin-right: .15rem;
   }

   .sp-right {
      width: 75%;
   }

   .sp-name {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }
   .sp-name>p:nth-child(1) {
      font-size: .15rem;
      line-height: .15rem;
      font-weight: 500;
      width: 65%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   .sp-name>p:nth-child(2) {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .sp-name>p>img {
      width: .15rem;
      margin-right: .04rem;
   }

   .sp-pf > p > img {
      width: .1rem;
      height: .1rem;
      margin-right: .03rem;
   }

   .sp-pf > p > span {
      font-weight: 500;
      font-size: .1rem;
      color: #999999;
   }

   .sp-pf > p:nth-child(1) > span {
      padding: 0 .05rem;
   }

   .sp-time {
      font-size: .1rem;
      color: #666666;
   }

   .sp-pf {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .sp-pf > p:nth-child(2) > span:nth-child(1) {
      padding-right: .05rem;
   }

   .sp-pl, .sp-time {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .sp-time {
      justify-content: space-between;
   }

   .sp-pl > p:nth-child(2) {
      margin: 0 .1rem;
   }

   .sp-name, .sp-pf, .sp-pl, .sp-time {
      margin-bottom: .05rem;
   }

   .sp-yytime {
      display: flex;
      flex-flow: row;
      align-items: center;
      margin: .15rem 0;
   }

   .sp-yytime > img {
      width: .18rem;
      height: .17rem;
      margin-right: .1rem;
   }

   .sp-yytime > p {
      font-size: .14rem;
      font-weight: 500;
      color: #333333;
   }

   .sp-ljyh {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .sp-ljyh > img {
      width: .08rem;
      height: .13rem;
   }

   .yhj {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .yhj > p:nth-child(1) {
      width: .7rem;
      height: .22rem;
      background: rgba(243, 59, 59, 1);
      border-radius: .03rem;
      color: #ffffff;
      font-size: .12rem;
      font-weight: 500;
      line-height: .22rem;
      text-align: center;
   }

   .yhj > p:nth-child(2) {
      font-size: .14rem;
      font-weight: 500;
      color: #E93534;
      margin-left: .1rem;
   }

   .shop {

   }

   .shoptit {
      width: 100%;
      height: .4rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      box-sizing: border-box;
      border-bottom: .01rem solid rgba(0, 0, 0, .1);
   }

   .shoptit > div {
      width: 25%;
      height: 100%;
      text-align: center;
      font-size: .16rem;
      font-weight: 500;
      color: #333333;
      position: relative;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
   }

   .tis {
      color: #F33B3B !important;
   }

   .shopHt {
      width: .44rem;
      height: .03rem;
      background: rgba(254, 72, 69, 1);
      position: absolute;
      bottom: 0;
      left: calc(50% - .22rem);
   }


   .yhj_wrap {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: .3rem .15rem;
      background-color: #F5F5F5;
   }

   .yhj_tit {
      display: flex;
      flex-flow: row;
      align-items: center;
      position: relative;
      margin-bottom: .15rem;
   }

   .yhj_tit > p {
      width: 100%;
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      text-align: center;
   }

   .yhj_tit > img {
      width: .26rem;
      height: .26rem;
      position: absolute;
      right: 0;
   }

   .yhj_item_wrap {
      width: 100%;
      height: 2.2rem;
      overflow-x: hidden;
      overflow-y: scroll;
   }

   .yhj_item {
      width: 100%;
      height: 1.05rem;
      background-image: url("../../../static/img/youhuiquanbj1111.png");
      background-size: 100% 100%;
      margin-bottom: .1rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .yhj_item_left {
      width: 28%;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
   }

   .yhj_item_left > p:nth-child(1) {
      font-size: .36rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FF002A;
   }

   .yhj_item_left > p:nth-child(1) > span {
      font-size: .24rem;
   }

   .yhj_item_left > p:nth-child(2) {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
   }

   .yhj_item_right {
      width: 71%;
      height: 100%;
      box-sizing: border-box;
      padding-left: .1rem;
      padding-right: .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .yhj_item_rt_left > p:nth-child(1) {
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #323134;
   }

   .yhj_item_rt_left > img:nth-child(2) {
      width: .45rem;
      margin: .05rem 0;
   }

   .yhj_item_rt_left > p:nth-child(3) {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #CCCCCC;
   }

   .yhj_item_btn {
      width: .7rem;
      height: .27rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
      border-radius: .13rem;
      text-align: center;
      line-height: .27rem;
      font-size: .1rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
   }

   .usered {
      background: none !important;
      box-shadow: none !important;
      border: .01rem solid rgba(255, 112, 4, 1);
      color: #FF6F02;
   }
   .jl_shop>span:nth-child(1) {
      display: inline-block;
      max-width: .65rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   .jl_shop {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
</style>
